<template>
<div id="sidebar-wrapper">
  <ul class="sidebar">
    <li class="sidebar-main">
      <a class="rd-sidebar-toggle" @click="toggle = !toggle">
        {{title}}
        <span class="menu-icon glyphicon glyphicon-transfer"></span>
      </a>
    </li>
    <li class="sidebar-title"><span>{{ $t("common.navigation") }}</span></li>
    <li v-for="menu in menus" class="sidebar-list">
      <a v-link="{ path: menu.url }" @click="onClick(menu)">
        {{menu.name}}<span class="{{menu.icon}}"></span>
      </a>
    </li>
  </ul>
  <div class="sidebar-footer">
    <div v-for="site in sites" class="col-xs-4">
      <a href="{{site.url}}" target="_blank">{{site.name}}</a>
    </div>
  </div>  
</div>
</template>

<script>
export default {
  props: {
    toggle: {
      type: Boolean,
      required: true,
      twoWay: true
    },
    title: {
      type: String,
      required: true
    },
    sites: {
      type: Array,
      required: true
    },
    menus: {
      type: Array,
      required: true
    },
    menuName: {
      type: String,
      required: true,
      twoWay: true
    }
  },
  methods: {
    onClick (menu) {
      this.menuName = menu.name
    }
  }
}
</script>

<style scoped>
.rd-sidebar-toggle {
  cursor: pointer;
}
.sidebar-footer a, 
ul.sidebar .sidebar-list a {
  text-transform: uppercase;
}
</style>